

const BaseUrl = "http://wthrcdn.etouch.cn/weather_mini?city="
const container = document.querySelector('.container')
const cityIpt = document.getElementById('city')
const searchBtn = document.getElementById('search-btn')

feather.replace()
search()

function ajaxGet(url) {
    const xmlhttp = new XMLHttpRequest()
    xmlhttp.open("GET", url);
    xmlhttp.send()
    return new Promise((resolve, reject) => {
        xmlhttp.onreadystatechange = function () {
            if (xmlhttp.readyState == 4) {
                if (xmlhttp.status == 200) {
                    resolve(JSON.parse(xmlhttp.responseText))
                } else if (xmlhttp.status == 0) {
                    reject('网络错误')
                } else {
                    reject(JSON.parse(xmlhttp.responseText))
                }
            }
        }
    })
}

searchBtn.onclick = search

function search(){
    const city = cityIpt.value ? cityIpt.value : '北京'
    getWeather(city)
}

function getWeather(city) {
    ajaxGet(BaseUrl + city).then((data) => {
        if(data.status == 1000){
            handleData(data.data)
        }
    })
}

function handleData(data) {
    handleToday(data)
    handleForecast(data.forecast)
    feather.replace()
}

function handleToday(data) {
    const now = new Date()
    const longDate = fullDate(now)
    const city = data.city
    const week = data.forecast[0].date.match(/.*(星期.)/)[1]
    const temperature = data.wendu
    const type = data.forecast[0].type
    container.querySelector('.date-dayname').innerText = week
    container.querySelector('.date-day').innerText = longDate
    container.querySelector('.weather-side .location').innerText = city
    container.querySelector('.weather-side .weather-temp').innerText = temperature + '°C'
    container.querySelector('.weather-side .weather-desc').innerText = type
    container.querySelector('.wind').innerText = data.ganmao
    
}

function handleForecast(forecast) {
    const now = new Date()
    const dataList = forecast.map((item, index) => {
        let data = {}
        let dateTem = new Date()
        dateTem.setDate(now.getDate() + index)
        data.week = item.date.match(/.*(星期.)/)[1]
        data.date = shortDate(dateTem)
        data.low = item.low.replace('低温 ', '')
        data.high = item.high.replace('高温 ', '')
        data.type = item.type
        data.icon = getIconClass(item.type)
        return data
    });
    const weekListEle = document.querySelector('.week-list')
    const html = dataList.map((item,index)=>{
        return `
        <li class="${index == 0 ? "active" : ''}">
            <i class="day-icon" data-feather="${item.icon}"></i>
            <span class="weather-type ">${item.type}</span>
            <span class="week-name">${item.week}</span>
            <span class="day-name">${item.date}</span>
            <span class="day-temp" >${item.low}~${item.high}</span>
        </li>
        `
    }).join('')
    weekListEle.innerHTML = html + '<div class="clear"></div>'
    
}

function fullDate(date) {
    let year = date.getFullYear()
    let month = date.getMonth() + 1
    let day = date.getDate()
    return `${year}年${month}月${day}日`
}

function shortDate(date) {
    let month = date.getMonth() + 1
    let day = date.getDate()
    return `${month}月${day}日`
}

// "cloud-drizzle","cloud-lightning","cloud-rain","cloud-snow",cloud,
// sun,sunrise,sunset,umbrella,wind,
function getIconClass(type) {
    const weahterIcon = {
        "晴": "sun",
        "多云": "cloud",
        "小雨": "cloud-drizzle",
        "阴": "cloud",
        "小雪":"cloud-snow"
    }
    if (!(type in weahterIcon)) {
        console.error(`${type}没有找到对应的图标，请设置`)
        return "sun"
    }
    return weahterIcon[type]
}
